<template>
    <div class="Collection">
        <nav-bar
        :goBack="true"
        :title="topTitle"
        :isSearch="false"
        :fatherIsTouch="!isTouch"
        :menuShow="true"
        :isCollectionPage="true"
        @handleAddCollection="handleAddCollection"
        :DirectoryIdArr="DirectoryIdArr"
        @handleGoBack="handleGoBack"
        ></nav-bar>

        <!-- 面包屑 -->
        <breadcrumb
        :breadcrumb="breadcrumb"
        isCollection
        :fatherListData="listData"
        v-if="listData.length > 0"
        ></breadcrumb>

        <!-- 数据列表 -->
        <div class="personal_outer">
            <div class="personal_content">
                <van-checkbox-group v-model="checkArr" ref="listCheck" max="1">
                    <data-list
                    v-for="(item) in listData"
                    :key="item.treeId"
                    :title="item.label"
                    :index="item.treeId"
                    :isTouch="isTouch"
                    :currentItem="item"
                    @handleCellClick="handleCellClick"
                    @IsCollectionClick="IsCollectionClick"
                    isCollectionPage
                    ></data-list>
                </van-checkbox-group>
            </div>
        </div>


    </div>
</template>

<script>
import NavBar from 'components/public/NavBar.vue'
import Breadcrumb from 'components/public/Breadcrumb.vue'
import DataList from "components/public/DataList.vue"
import OperationMenu from "components/public/OperationMenu.vue"

export default {
    name: 'Collection',
    components: {
        NavBar,
        Breadcrumb,
        DataList,
        OperationMenu
    },
    props: {

    },
    data() {
        return {
            // 通用变量
            // 顶部标题
            topTitle: "请选择收藏夹",
            checkArr: [],
            // 数据列表
            listData: [],
            // 子数据列表
            childrenListData: [],
            // 是否加载面包屑， 用于格式筛选
            falge: false,
            isTouch: true,

            // 点击的DirectoryId, 目录ID, 用于点击进入文件夹
            DirectoryId: '',
            DirectoryIdArr: [''],

            // 面包屑
            breadcrumb: ['收藏夹']

        }
    },
    created(){
        this.getCollectionList()
    },
    methods: {
        // 加载数据
        getCollectionList(){
            this.$request({
                method: 'get',
                url: '/api/FavouriteTree/GetFavouriteTreeByTreeId',
                params: {
                    Token: sessionStorage.getItem("mobileToken"),
                    treeId: 0,
                    Name: '',
                    FileCategory: '',
                    pageSize: '',
                    pageIndex: ''
                }
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    this.listData = data.treeDataList
                    this.childrenListData = data.treeDataList.map(item => item.children)

                    // console.log(this.childrenListData)
                }else{
                    this.$notify('加载数据失败，请重试。')
                }
            })
        },
        // 监听cell单元格点击进入子文件夹
        handleCellClick(currentItem){
            // console.log(currentItem)
            if(currentItem.children.length > 0){
                
                this.DirectoryId = currentItem.parentTreeId
                // 储存DirectoryId
                this.DirectoryIdArr.push(this.DirectoryId)

                this.listData = currentItem.children

                let breadcrumbTitle = currentItem.label
                this.breadcrumb.push(breadcrumbTitle)
                // console.log(this.breadcrumb)
            }
        },
        // 监听右侧添加到事件
        handleAddCollection(bol){
            if(bol){
                // console.log(this.$route.params.resourcesId)
                // console.log(this.$route.params.type)
                this.$request({
                    method: 'post',
                    url: '/api/FavouriteTree/Collection?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        TreeId: this.checkArr[0],
                        Type: this.$route.params.type,
                        ResourcesId: this.$route.params.resourcesId
                    }
                }).then(({data}) => {
                    // console.log(data)
                    if(data.code == 200){
                        this.$notify({type: 'success', message: data.msg})
                        this.$router.go(-1)
                    }else{
                        this.$notify(data.msg)
                    }
                })
            }
        },
        // 子组件返回上一级事件， 
        handleGoBack(arr){
            // console.log(arr)
            this.DirectoryId = arr[arr.length-1]
            this.getCollectionList()

            this.breadcrumb.pop()
        },
        // son单选提示事件
        IsCollectionClick(){
            if(this.checkArr.length >= 1){
                this.$toast('最多只能选择一个!')
            }
        }
    }
}
</script>

<style lang="less" scope>

</style>